<template>
  <div>
    <!-- 封面图 -->
    <div class="banner" :style="blogCover">
      <div class="blog-info-container">
        <!-- 文章标题 -->
        <div class="blog-title">{{ blog.title }}</div>
        <div class="blog-info">
          <div class="first-line">
            <!-- 发表时间 -->
            <span>发表于 {{ blog.createTime }}</span>
            <span class="separator">|</span>
            <!-- 发表时间 -->
            <span>更新于 {{ blog.updateTime }}</span>
            <span class="separator">|</span>
            <!-- 文章分类 -->
            <span>{{ blog.typeStr }}</span>
            <span class="separator">|</span>
            <span>浏览量 {{ blog.views }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="blog-container">
      <div class="card-box blog-wrapper">
        <div
          class="blog-content markdown-body"
          v-html="blog.content"
          ref="article"
        ></div>
        <!-- 版权声明 -->
        <div class="blog-copyright">
          <div>
            <span>文章作者：</span>
            <a href="/blog" target="_blank">{{ blog.nickName }}</a>
          </div>
          <div>
            <span>文章链接：</span>
            <a :href="url" target="_blank">{{ url }} </a>
          </div>
          <div>
            <span>版权声明：</span>本博客所有文章除特别声明外，均采用
            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">
              CC BY-NC-SA 4.0
            </a>
            许可协议。转载请注明文章出处。
          </div>
        </div>
        <!--点赞收藏等-->
        <div class="blog-reward">
          <a :class="(blog.like ? 'set' : '')" @click="like">
            点赞
            <span v-show="blog.likeCount > 0">{{ blog.likeCount }}</span>
          </a>
          <a :class="(blog.collect ? 'set' : '')" @click="collect">收藏</a>
        </div>
        <hr>
        <!--评论-->
        <Comment
          :commentList="commentList"
          :count="count"
          @reloadComment="listComment"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {getDetial} from "../../api/blog/blog";
import {getCommentList} from "../../api/blog/comment";
import {like, cancelLike} from "@/api/blog/like";
import {collect, cancelCollect} from "@/api/blog/collection";
import Comment from "@/views/blog/components/Comment";

export default {
  components: {Comment},
  data() {
    return {
      path: process.env.VUE_APP_BASE_API,
      blog: {},
      commentList: [{
        content: 'test',
        createTime: '2022-03-01',
        avatar: "http://xiaoshuaiblog.oss-accelerate.aliyuncs.com/config/a041babaf76911e3b7484844d2d481f6.jpg",
        nickName: '天不生我傅瓜皮',
        upCount: 30,
        downCount: 40,
      }],
      count: 1,
      url: window.location.href
    }
  },
  methods: {
    like() {
      if (this.blog.like) {
        this.cancelLike();
        return;
      }
      like({objType: 0, objId: this.blog.id, isLike: 1}).then(response => {
        this.blog.likeCount++;
        this.blog.like = true;
      });
    },
    cancelLike() {
      cancelLike({objType: 0, objId: this.blog.id, isLike: 1}).then(response => {
        this.blog.likeCount--;
        this.blog.like = false;
      });
    },
    collect() {
      if (this.blog.collect) {
        this.cancelCollect();
        return;
      }
      collect(this.blog.id).then(response => {
        this.blog.collect = true;
      });
    },
    cancelCollect() {
      cancelCollect(this.blog.id).then(response => {
        this.blog.collect = false;
      });
    },
    listComment() {
      getCommentList(this.blog.id).then(response => {
        this.count = response.total;
        this.commentList = response.rows;
        for (var i = 0; i < this.commentList.length; i++)
          this.commentList[i].avatar = this.path + this.commentList[i].avatar;
      });
    }
  },
  created() {
    getDetial(this.$route.params.id).then(response => {
      this.blog = response.data;
      this.listComment();
    });
  },
  computed: {
    blogCover() {
      return (
        "background: url(" +
        this.path + '/' + this.blog.cover +
        ") center center / cover no-repeat"
      );
    }
  }
}
</script>

<style scoped>
.banner {
  position: absolute;
  background-color: #49b1f5!important;
  top: -60px;
  left: 0;
  right: 0;
  height: 460px;
  animation: header-effect 1s;
  color: #eee!important;
}

.banner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.blog-info-container {
  position: absolute;
  bottom: 6.25rem;
  padding: 0 8%;
  width: 100%;
  text-align: center;
}

.blog-title {
  font-size: 35px;
  margin: 20px 0 8px;
}

.blog-info {
  font-size: 14px;
  line-height: 1.9;
  display: inline-block;
}

.blog-info span {
  font-size: 95%;
}

.separator {
  margin: 0 6px;
}

.blog-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  animation: main 1s;
  max-width: 1000px;
  margin: 372.5px auto 40px auto!important;
  padding: 0 5px;
}

.card-box {
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-top: 20px;
  text-decoration: none;
  outline: none;
  border-radius: 12px 8px 8px 12px;
  background: #fff;
  color: #4c4948;
  box-shadow: 0 4px 8px 6px rgba(7,17,27,.06);
  transition: all .3s;
  overflow-wrap: break-word;
  white-space: normal;
  will-change: box-shadow;
  flex-direction: column;
  align-items: center;
  line-height: 2;
  padding: 1.25rem 1.5rem;
}

.card-box:hover {
  box-shadow: 0 4px 12px 12px rgba(7,17,27,.15);
}

.blog-wrapper {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 50px 40px;
}

.blog-copyright {
  position: relative;
  margin-top: 40px;
  margin-bottom: 10px;
  font-size: .875rem;
  line-height: 2;
  padding: .625rem 1rem;
  border: 1px solid #eee;
}

.blog-copyright:before {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  background: #49b1f5;
  content: "";
  text-decoration: inherit;
  vertical-align: inherit;
}

.blog-copyright span {
  color: #49b1f5;
  font-weight: 700;
}

.blog-container a {
  text-decoration: underline;
  color: #99a9bf;
}

.blog-reward {
  margin-top: 2rem;
  display: flex;
  padding: 0 150px;
  justify-content: space-evenly;
  align-items: center;
}

.blog-reward a {
  text-decoration: none!important;
  display: inline-block;
  width: 100px;
  background: #969696;
  color: #fff!important;
  text-align: center;
  line-height: 36px;
  font-size: .875rem;
}

hr {
  position: relative;
  margin: 40px auto;
  border: 2px dashed #d2ebfd;
  width: calc(100% - 4px);
  overflow: visible;
}

.set {
  background: orange!important;
}
</style>
